//页面基准
function getFontSize() {
  return Number(String(document.documentElement.style.fontSize).replace('px', ''));
}

//表盘对象
let dial = {
  ctx: {},
  panel: {
    width: 0, //宽
    height: 0,//高
    textR: 130 + 10,  //文字半径
    inArcRadius: 110, //内部进度圆半径
    inArcLineWidth: 1, //内部进度圆半径
    outArcRadius: 130, //外部进度圆半径
    outArcLineWidth: 10, //外部进度圆半径
  },
  //指针OBJ
  point: {
    //旋转角度
    index: 150,
    offsetR: 113,//指针半径,
    width: 10,
    height: 10,
    startDegree: 135,
    endDegree: 405,
    animationFrameId: 0
  },
  val: 0,
  valMax: 500 // 默认500
};

function draw() {
  let panel = document.getElementById('c1');
  dial.ctx = panel.getContext('2d');
  // dial.ctx.globalCompositeOperation = 'destination-over';  //反向覆盖
  dial.ctx.clearRect(0, 0, dial.panel.width, dial.panel.height)

  //内部圆
  dial.ctx.save();
  dial.ctx.beginPath();
  dial.ctx.strokeStyle = 'white';
  dial.ctx.lineWidth = dial.panel.inArcLineWidth;
  dial.ctx.arc(dial.panel.width / 2, dial.panel.height / 2, dial.panel.inArcRadius, 0, 2 * Math.PI, false)
  dial.ctx.stroke();
  dial.ctx.restore();

  //外部-部分圆
  dial.ctx.save();
  dial.ctx.beginPath();
  dial.ctx.strokeStyle = 'rgba(255,255,0,0.25)';
  dial.ctx.lineWidth = dial.panel.outArcLineWidth;
  dial.ctx.lineCap = 'round';
  dial.ctx.arc(dial.panel.width / 2, dial.panel.height / 2, dial.panel.outArcRadius, Math.PI * 3 / 4, Math.PI / 4, false)
  dial.ctx.stroke();
  dial.ctx.restore();

  //文字半径
  //参考数【0】计算x，y
  dial.ctx.save();
  dial.ctx.fillStyle = 'white';
  let y0 = (Math.sin(Math.PI / 4) * dial.panel.textR) + panel.height / 2;
  let x0 = dial.panel.width / 2 - (Math.cos(Math.PI / 4) * dial.panel.textR);
  dial.ctx.font = "15px serif";
  dial.ctx.fillText("0", x0 + 5, y0 + 16);

  //参考数【500】计算x，y
  let y500 = (Math.sin(Math.PI / 4) * dial.panel.textR) + dial.panel.height / 2;
  let x500 = dial.panel.width / 2 + (Math.cos(Math.PI / 4) * dial.panel.textR);
  dial.ctx.font = "15px serif";
  dial.ctx.fillText("500", x500 - 18, y500 + 16);

  //参考数【50】计算x，y
  let y50 = dial.panel.height / 2;
  let x50 = dial.panel.width / 2 - dial.panel.textR;
  dial.ctx.font = "15px serif";
  dial.ctx.fillText("50", x50 - 15, y50);

  //参考数【300】计算x，y
  let y300 = dial.panel.height / 2;
  let x300 = dial.panel.width / 2 + dial.panel.textR;
  dial.ctx.font = "15px serif";
  dial.ctx.fillText("300", x300 + 2, y300 + 4);

  //参考数【100】计算x，y
  let y100 = (dial.panel.height / 2) - (Math.sin(Math.PI / 4) * dial.panel.textR);
  let x100 = (dial.panel.width / 2) - (Math.cos(Math.PI / 4) * dial.panel.textR);
  dial.ctx.font = "15px serif";
  dial.ctx.fillText("100", x100 - 20, y100);

  //参考数【200】计算x，y
  let y200 = (dial.panel.height / 2) - (Math.sin(Math.PI / 4) * dial.panel.textR);
  let x200 = (dial.panel.width / 2) + (Math.cos(Math.PI / 4) * dial.panel.textR);
  dial.ctx.font = "15px serif";
  dial.ctx.fillText("200", x200, y200);

  //参考数【150】计算x，y
  let y150 = (dial.panel.height / 2) - dial.panel.textR;
  let x150 = dial.panel.width / 2;
  dial.ctx.font = "15px serif";
  dial.ctx.fillText("150", x150 - 10, y150);
  dial.ctx.restore();

  //绘制指针
  dial.ctx.beginPath();
  dial.ctx.save();
  dial.ctx.translate(dial.panel.width / 2, dial.panel.height / 2);
  dial.point.startDegree++;
  dial.ctx.rotate(Math.PI / 180 * dial.point.startDegree);
  dial.ctx.translate(-dial.panel.width / 2, -dial.panel.height / 2);
  dial.ctx.fillStyle = 'green';
  triangle(dial.ctx, dial.panel.width / 2 + dial.point.offsetR + dial.point.width, dial.panel.height / 2, dial.point.width, dial.point.height)
  dial.ctx.restore();

  //绘制进度条
  dial.ctx.beginPath();
  dial.ctx.save();
  let processGradient = dial.ctx.createLinearGradient(0, 0, dial.panel.width, 0);
  processGradient.addColorStop(0.2, "green");
  processGradient.addColorStop(0.5, "blue");
  processGradient.addColorStop(1, "white");
  dial.ctx.strokeStyle = processGradient;
  dial.ctx.lineWidth = dial.panel.outArcLineWidth;
  dial.ctx.lineCap = 'round';
  dial.ctx.arc(dial.panel.width / 2, dial.panel.height / 2, dial.panel.outArcRadius, Math.PI * 3 / 4, Math.PI / 180 * dial.point.startDegree, false);
  dial.ctx.stroke();
  dial.ctx.restore();

  //绘制文字
  dial.ctx.beginPath();
  dial.ctx.save();
  dial.ctx.fillStyle = 'white';
  dial.ctx.font = 'bold 14px sans-serif';
  dial.ctx.textAlign = 'center';
  dial.ctx.fillText('HCHO指数', dial.panel.width / 2, dial.panel.width * 6.5 / 20);
  dial.ctx.font = 'bold 12px sans-serif';
  dial.ctx.fillText('空气很棒，适宜居住和活动', dial.panel.width / 2, dial.panel.width * 10 / 20);
  dial.ctx.restore();

  //绘制中央分数
  dial.ctx.beginPath();
  dial.ctx.save();
  dial.val = "0.1222222222235";
  dial.ctx.textAlign = 'center';
  dial.ctx.fillStyle = 'green';
  let valBgWidth = dial.ctx.measureText(dial.val).width + 10; //方块宽度
  roundRectColor(dial.ctx, dial.panel.width / 2 - (valBgWidth / 2), dial.panel.width * 7.5 / 20, valBgWidth, 20, 10);
  dial.ctx.fillStyle = 'white';
  dial.ctx.fillText(dial.val, dial.panel.width / 2, dial.panel.width * 8.2 / 20);
  dial.ctx.restore();

  //绘制五角星
  let fiveStarWidth = 4;
  let fiveStartCount = 6;
  for (let i = -((fiveStartCount - 1) / 2); i <= ((fiveStartCount - 1) / 2); i++) {
    drawStart(dial.ctx, fiveStarWidth, dial.panel.width / 2 + (i * fiveStarWidth * 5), dial.panel.width * 13 / 20, 0)
  }

  //处理动画
  dial.point.animationFrameId = requestAnimationFrame(draw);
  if (dial.point.startDegree >= dial.point.endDegree) {
    cancelAnimationFrame(dial.point.animationFrameId);
  }
}

//按照比例计算value
function handlerVal(percent, valMax) {
  return valMax * percent;
}

//绘制圆角矩形（纯色填充）
function roundRectColor(ctx, x, y, w, h, r) {
  ctx.beginPath();
  ctx.save();
  ctx.fillStyle = 'green';
  ctx.strokeStyle = 'green';
  ctx.lineJoin = 'round';  //交点设置成圆角
  ctx.lineWidth = r;
  ctx.strokeRect(x + r / 2, y + r / 2, w - r, h - r);
  ctx.fillRect(x + r, y + r, w - r * 2, h - r * 2);
  ctx.stroke();
  ctx.closePath();
  dial.ctx.restore();
}

//绘制三角形
function triangle(ctx, x, y, w, h) {
  ctx.beginPath();
  ctx.moveTo(x, y);
  ctx.lineTo(x - w, y - (h / 2));
  ctx.lineTo(x - w, y + (h / 2));
  ctx.fill();
}

/*****************************
 * 绘制五角星
 * cxt 为绘图上下文环境
 * r 为大圆半径
 * x，y 为相对 canvas 原点的坐标位置
 * rot 为顺时针旋转角度
 ****************************/
function drawStart(cxt, r, x, y, rot) {
  cxt.save();
  cxt.fillStyle = 'green';
  cxt.strokeStyle = 'green';
  cxt.translate(x, y);
  cxt.rotate(rot / 180 * Math.PI);
  cxt.scale(r, r);
  startPath(cxt);
  cxt.stroke();
  cxt.restore();
}

//五角星标准路径
function startPath(cxt) {
  cxt.beginPath();
  for (let i = 0; i < 5; i++) {
    let x1 = Math.cos((54 + i * 72) / 180 * Math.PI);
    let y1 = Math.sin((54 + i * 72) / 180 * Math.PI);
    let x2 = Math.cos((18 + i * 72) / 180 * Math.PI) * 0.5;
    let y2 = Math.sin((18 + i * 72) / 180 * Math.PI) * 0.5;
    cxt.lineTo(x2, y2);
    cxt.lineTo(x1, y1);
  }
  cxt.closePath();
}

window.onload = () => {
  let panel = document.getElementById('c1');
  dial.panel.width = panel.width = panel.width * getFontSize();
  dial.panel.height = panel.height = panel.height * getFontSize();
  draw();
}
